<template>
  <div>
    <basic-container>
      <el-form :model="form" ref="form" label-width="80px" class="search">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="子系统:" prop="sysType">
              <el-select v-model="form.sysType" size="mini" @change="getModule" clearable>
                <el-option v-for="item in sysTypeList" :key="item.value" :value="item.value"
                           :label="item.label"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作模块:" prop="module" clearable>
              <el-cascader
                v-model="form.module"
                :disabled="moduleList.length === 0"
                :placeholder="moduleList.length === 0 ? '请先选择子系统' : '请选择'"
                :options="moduleList"
                size="mini"
              >
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="操作时间:" prop="createTime">
              <el-date-picker
                size="mini"
                v-model="form.createTime"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" v-if="isPC">
            <el-form-item label="租户:" prop="tenantId" clearable>
              <el-select v-model="form.tenantId" size="mini" @change="getUser" clearable filterable>
                <el-option v-for="(item,index ) in tenantList" :key="index" :value="item.tenantId"
                           :label="item.tenantName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作人:" prop="createUser" clearable>
              <el-select
                v-model="form.createUser"
                size="mini"
                filterable
                :disabled="isPC && createUserList.length === 0"
                :placeholder="isPC && createUserList.length === 0 ? '请先选择租户' : '请选择'">
                <el-option v-for="(item,index ) in createUserList" :key="index" :value="item.id"
                           :label="item.realName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="6" style="width:300px;">
            <el-form-item>
              <div>
                <el-button size="mini" icon="el-icon-download" type="text" @click="handleExport">导 出</el-button>
                <el-button size="mini" type="primary" @click="search">搜 索</el-button>
                <el-button size="mini" @click="reset">清 空</el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </basic-container>
    <basic-container>
      <avue-crud :option="option"
                 :table-loading="loading"
                 :data="data"
                 :page.sync="page"
                 ref="crud"
                 @current-change="currentChange"
                 @size-change="sizeChange"
                 @refresh-change="refreshChange"
                 @on-load="onLoad">
        <template slot-scope="{row}" slot="content">
          <el-tooltip placement="top">
            <div slot="content" style="max-width: 300px" v-html="row.content.replaceAll('*', '<br/>*')"/>
            <div style="text-overflow: ellipsis; overflow: hidden;white-space:nowrap;}">{{ row.content }}</div>
          </el-tooltip>
        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import {getList, getListAll, getCreateUser, getModule, getTenantId} from "@/api/system/operationLog";
import {exportExcel2} from "@/util/util";
import Moment from 'moment';

export default {
  name: "operationLog",
  data() {
    return {
      isPC: false,
      form: {
        sysType: '',
        module: '',
        createTime: [],
        createUser: '',
        tenantId: '',
      },
      sysTypeList: [
        {label: 'BC', value: 'BC'},
        {label: 'OC', value: 'OC'}
      ],
      tenantList: [],
      moduleList: [],
      createUserList: [],
      data: [],
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      loading: false,
      option: {
        calcHeight: 30,
        tip: false,
        menu: false,
        index: false,
        addBtn: false,
        viewBtn: false,
        selection: false,
        column: [
          {
            label: "子系统",
            prop: "sysType",
          },
          {
            dicUrl: "/api/blade-user/get-user-by-tenant-id",
            props: {
              label: "realName",
              value: "id"
            },
            prop: 'createUser',
            label: "操作人",
          },
          {
            label: "操作模块",
            prop: "module",
          },
          {
            label: "操作时间",
            prop: "createTime",
          },
          {
            label: "操作内容",
            prop: "content",
          },
        ]
      }
    }
  },
  created() {
    if (this.userInfo.tenant_id === '000000') {
      this.isPC = true
      getTenantId().then(r => {
        this.tenantList = r.data.data
      })
    } else {
      getCreateUser().then(res => {
        this.createUserList = res.data.data
      })
    }
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  methods: {
    getUser(v) {
      if (v !== '') {
        getCreateUser(v).then(r => {
          this.createUserList = r.data.data
          this.form.createUser = ''
        })
      }else{
        this.form.createUser = ""
        this.createUserList = []
      }
    },
    getUserName(userId) {
      for(let i=0;i<this.createUserList.length;i++) {
        if(this.createUserList[i].id == userId) {
          return this.createUserList[i].realName;
        }
      }
      return userId;
    },
    getModule(v) {
      if (v !== '') {
        getModule(v).then(r => {
          this.moduleList = r.data.data
          this.form.module = ''
        })
      }else{
        this.form.module = ""
        this.moduleList = []
      }
    },
    search() {
      this.page.currentPage = 1
      this.onLoad(this.page)
    },
    reset() {
      this.moduleList = []
      if (this.isPC)
        this.createUserList = []
      this.$refs.form.resetFields();
      this.search()
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page);
    },
    onLoad(page) {
      this.loading = true;
      let params = {
        sysType: this.form.sysType,
        module: this.form.module[1],
        createUser: this.form.createUser,
        tenantId: this.form.tenantId,
        beginDate: (this.form.createTime != null && this.form.createTime.length == 2)?this.form.createTime[0]:'',
        endDate: (this.form.createTime != null && this.form.createTime.length == 2)?this.form.createTime[1]:'',
      }
      getList(page.currentPage, page.pageSize, Object.assign(params)).then(res => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
      });
    },
    handleExport() {
      let params = {
        sysType: this.form.sysType,
        module: this.form.module[1],
        createUser: this.form.createUser,
        tenantId: this.form.tenantId,
        beginDate: (this.form.createTime != null && this.form.createTime.length == 2)?this.form.createTime[0]:'',
        endDate: (this.form.createTime != null && this.form.createTime.length == 2)?this.form.createTime[1]:'',
      }
      this.loading = true;
      getListAll(Object.assign(params)).then(res => {
        let dataList = res.data.data;
        let tableData = {
          title: null,
          headers: [],
          rowList: [],
          bottom: [],
        };
        let titleList = ['子系统','操作人','操作模块','操作时间','操作内容'];
        titleList.forEach(title=>{
          tableData.headers.push({
            data: title,
            style: 'text-align: left; background-color: #bebebe; font-weight: bold;'
          });
        });

        dataList.forEach(row => {
          let colList = [];
          colList.push({data: row.sysType, style: 'text-align: left;'});
          colList.push({data: this.getUserName(row.createUser), style: 'text-align: left;'});
          colList.push({data: row.module, style: 'text-align: left;'});
          colList.push({data: row.createTime, style: 'text-align: left;'});
          colList.push({data: row.content, style: 'text-align: left;'});
          tableData.rowList.push(colList);
        });
        exportExcel2(tableData.title, tableData.headers, tableData.rowList, tableData.bottom, '操作记录-' + Moment().format('YYYYMMDDhhmmss'));
      }).finally(()=>{
        this.loading = false;
      });
    },
  }
}
</script>

<style scoped lang="scss">
.search {
  /deep/ .el-form-item {
    margin-bottom: 0;
  }
}
</style>
